<!--
 * @Author: zhuxiaohang
 * @Date: 2023-11-20 14:35:10
 * @LastEditors: zhuxiaohang
 * @LastEditTime: 2023-12-29 20:24:43
 * @Description: file content
 * @FilePath: \co-prosperity-adoption-admin\src\views\restaurant\restaurantManage\restaurantDialog.vue
-->
<template>
  <div class="divBox">
    <el-form ref="formValidate" :model="formValidate" label-width="100px" class="formValidate mt20">
      <el-col :span="12">
        <el-form-item
          label="单据号："
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            v-model="formValidate.homeName"
            :disabled="isCreate==2"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="设备名称："
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            v-model="formValidate.homeName"
            :disabled="isCreate==2"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
      </el-col>

      <el-table :data="tableData" style="width: 100%" max-height="550">
        <el-table-column prop="date" label="维修内容">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              :disabled="isCreate==2"
              v-model="scope.row.wzms"
            ></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="检查内容">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :disabled="isCreate==2"
              placeholder="请输入内容"
              v-model="scope.row.wzcl"
            ></el-input>
          </template>
        </el-table-column>-->
        <el-table-column label="操作" width="100" fixed="right" align="center" v-if="isCreate!=2">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="bt">
        <el-button style="width:100px" type="primary" @click="addNew" v-if="isCreate!=2">添加一条</el-button>
        <el-button
          style="width:100px"
          type="primary"
          @click="submitForm('formValidate')"
          v-if="isCreate!=2"
        >提交</el-button>
        <el-button style="width:100px" @click="close">取消</el-button>
      </div>
    </el-form>
    <el-dialog
      v-model="modalMap"
      title="上传经纬度"
      :visible.sync="modalMap"
      append-to-body
      class="mapBox"
      width="500px"
    >
      <iframe id="mapPage" width="100%" height="500px" frameborder="0" v-bind:src="keyUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  homeGetInfo,
  homeGetEdit,
  homeGetAdd,
  getmedalList
} from "@/api/village";

// import { configInfo } from '@/api/systemConfig';
// import Tinymce from '@/components/Tinymce/index'
export default {
  // components: { Tinymce },
  props: {
    selectItem: {
      type: Object,
      default: () => {}
    },
    isCreate: {
      type: Number //0-新增 1-编辑   2-查看
    },
    categoryOptions: {
      type: Array
    }
  },
  watch: {},
  data() {
    return {
      tableData: [
        {
          wzms: "",
          wzcl: ""
        }
      ],
      medalList: [],
      medalId: [],
      modalMap: false, //地图弹窗
      keyUrl: undefined,
      time: undefined, //营业时间
      formValidate: {
        medalId: [],
        homeName: undefined, //店铺名称
        homeAddress: [], //标签
        // homeIntegral: undefined,//详细地址
        latitude: undefined,
        longitude: undefined,
        homeInfo: undefined //联系电话
        // medalList: undefined
      },
      dialogVisible: false
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let list = [];
    this.$refs["formValidate"].resetFields();
    if (this.selectItem) {
      let data = {
        id: this.selectItem.id
      };
      homeGetInfo(data).then(res => {
        console.log(res, "围殴还是很");
        this.time = [res.openTime, res.closeTime];
        this.formValidate = {
          id: res.id,
          homeInfo: res.homeInfo, //联系电话
          // medalId: res.medalList,
          homeName: res.homeName, //店铺名称
          // homeIntegral: res.homeIntegral,
          homeAddress: res.homeAddress, //详细地址
          latitude: res.latitude,
          longitude: res.longitude
        };
        if (res.medalList.length != 0) {
          res.medalList.map(ress => {
            list.push(ress.id);
            console.log(ress, "kkk");
          });
        }

        this.formValidate.medalId = list;
        // .split(',')
      });
    }
  },
  methods: {
    handleDelete(data, index) {
      this.tableData.splice(index, 1);
    },
    addNew() {
      let data = {
        wzms: "",
        wzcl: ""
      };
      this.tableData.push(data);
    },
    init() {
      // getmedalList().then(res => {
      //   this.medalList = res;
      // });
    },
    // key值

    // 时间选择
    handlerChangeTime(val) {
      if (val === 1) {
        this.formValidate.openTime = this.time[0];
        this.formValidate.closeTime = this.time[1];
      }
    },
    //查找位置
    onSearch() {
      this.modalMap = true;
    },

    //地图选择位置信息
    selectAdderss(val) {
      this.formValidate.homeAddress = val.poiaddress;
      this.formValidate.latitude = val.latlng.lat;
      this.formValidate.longitude = val.latlng.lng;
      this.modalMap = false;
    },

    handleCheckedCitiesChange(val) {
      console.log(8989, val);
    },

    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      this.$modalUpload(
        function(img) {
          if (tit === "2" && !num) {
            if (img.length > 1)
              return this.$message.warning("最多选择1张图片！");
            _this.formValidate.image = img[0].sattDir;
          }
          if (tit === "3" && !num) {
            if (img.length > 10)
              return this.$message.warning("最多选择10张图片！");
            if (img.length + _this.formValidate.sliderImage.length > 10)
              return this.$message.warning("最多选择10张图片！");
            console.log(5555, _this.formValidate.sliderImage);
            img.map(item => {
              _this.formValidate.sliderImage.push(item.sattDir);
            });
          }
        },
        tit,
        "content"
      );
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item, name) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      if (name === 3) {
        const newItems = [...this.formValidate.sliderImage];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.sliderImage = newItems;
      }
      // if (name === 2) {
      //   const newItems = [...this.formValidate.image]
      //   const src = newItems.indexOf(this.dragging)
      //   const dst = newItems.indexOf(item)
      //   newItems.splice(dst, 0, ...newItems.splice(src, 1))
      //   this.formValidate.image = newItems
      // }
    },

    // 删除图片
    handleRemove(i, name) {
      if (name === 2) {
        this.formValidate.image.splice(i, 1);
      }
      if (name === 3) {
        this.formValidate.sliderImage.splice(i, 1);
      }
    },
    close() {
      this.$emit("close");
    },
    // 保存提交
    submitForm() {
      console.log(this.tableData, "这是什么呀?");
      if (this.isCreate === 0) {
        //新增
        this.$refs.formValidate.validate(valid => {
          this.formValidate.medalId = this.formValidate.medalId.toString();
          console.log(this.formValidate, "this.formValidatethis.formValidate");
          if (valid) {
            homeGetAdd(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }

      if (this.isCreate === 1) {
        //编辑
        this.formValidate.medalId = this.formValidate.medalId.toString();
        console.log(this.formValidate, "2this.formValidatethis.formValidate");
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            homeGetEdit(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }
    },

    //添加标签
    handlerAddTags() {
      this.formValidate.tags.push("");
    },
    //删除标签
    handlerDeleteTags(index) {
      this.formValidate.tags.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.divBox {
  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }

  .bt {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .tagsInner {
      width: 150px;
    }
  }
}
</style>
<style lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}
</style>
